import { ref, onUnmounted, watch } from 'vue'; // 新增 watch

/**
 * 全屏功能组合式函数（新增动态--vh更新）
 * @returns {Object} - 包含全屏状态、进入全屏、退出全屏、切换全屏的方法
 */
export function useFullScreen() {
  // 全屏状态（true：全屏，false：非全屏）
  const isFullScreen = ref(false);

  // 🔥 新增：更新全局--vh变量（供所有组件使用）
  const updateVhVariable = () => {
    const viewportHeight = window.innerHeight; // 实时获取视口高度
    document.documentElement.style.setProperty('--vh', `${viewportHeight}px`); // 设置全局CSS变量
  };

  // 监听全屏状态变化的处理函数
  const handleFullScreenChange = () => {
    isFullScreen.value = !!document.fullscreenElement ||
      !!document.webkitFullscreenElement ||
      !!document.msFullscreenElement;
    updateVhVariable(); // 🔥 全屏状态变了，同步更新--vh
  };

  // 初始化：监听全屏状态变化 + 初始化--vh
  const initFullScreenListener = () => {
    // 兼容不同浏览器的全屏事件
    document.addEventListener('fullscreenchange', handleFullScreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullScreenChange);
    document.addEventListener('msfullscreenchange', handleFullScreenChange);
    // 监听窗口大小变化（旋转屏幕、缩放窗口也会触发）
    window.addEventListener('resize', updateVhVariable);
    // 初始化--vh（页面加载时执行一次）
    updateVhVariable();
  };

  // 进入全屏（支持传入指定元素，默认全屏整个页面）
  const requestFullScreen = (element = document.documentElement) => {
    try {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullscreen) { // Safari
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) { // IE/Edge
        element.msRequestFullscreen();
      } else {
        console.warn('当前浏览器不支持全屏 API');
      }
      // 🔥 延迟更新--vh（适配浏览器全屏渲染延迟）
      setTimeout(updateVhVariable, 100);
    } catch (error) {
      console.error('进入全屏失败：', error);
    }
  };

  // 退出全屏
  const exitFullScreen = () => {
    try {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitExitFullscreen) { // Safari
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { // IE/Edge
        document.msExitFullscreen();
      }
      setTimeout(updateVhVariable, 100); // 🔥 退出全屏也更新--vh
    } catch (error) {
      console.error('退出全屏失败：', error);
    }
  };

  // 切换全屏（传入元素时，切换该元素的全屏状态；无元素时，切换页面全屏）
  const toggleFullScreen = (element = document.documentElement) => {
    if (isFullScreen.value) {
      exitFullScreen();
    } else {
      requestFullScreen(element);
    }
  };

  // 页面卸载时清理监听（避免内存泄漏）
  onUnmounted(() => {
    document.removeEventListener('fullscreenchange', handleFullScreenChange);
    document.removeEventListener('webkitfullscreenchange', handleFullScreenChange);
    document.removeEventListener('msfullscreenchange', handleFullScreenChange);
    window.removeEventListener('resize', updateVhVariable); // 移除窗口监听
  });

  // 初始化监听（组件挂载时自动触发）
  initFullScreenListener();

  return {
    isFullScreen, // 全屏状态（响应式）
    requestFullScreen, // 进入全屏
    exitFullScreen, // 退出全屏
    toggleFullScreen, // 切换全屏
    updateVhVariable // 暴露出去，供外部手动更新（可选）
  };
}